<template>
  <!--  <div class="ad-table-form">-->
  <!--    <div class="ad-block">-->
  <!--      <div class="table-op">-->
  <!--        <el-button size="mini" type="primary" plain @click="addDriver">新增</el-button>-->
  <!--      </div>-->
  <div>
    <div v-if="type!=1" style="color:#888;margin-bottom: 16px">
      可按公司名称、结算人姓名、结算人手机号进行搜索，如没有找到可以点击【新增】按钮，添加结算人
    </div>
    <el-row v-if="type!=1">
      <el-form ref="form" :inline="true" label-width="auto" size="small">
        <el-row>
          <el-form-item label="公司名称">
            <el-input v-model="companyName" @input="val_change()" placeholder="请输入"
                      style="width: 150px"/>
          </el-form-item>
          <el-form-item label="结算人">
            <el-input v-model="settlementName" @input="val_change()" placeholder="请输入"
                      style="width: 140px"/>
          </el-form-item>
          <el-form-item label="结算电话">
            <el-input v-model="settlementPhone" @input="val_change(true)" placeholder="请输入"
                      style="width: 160px"/>
          </el-form-item>
        </el-row>
      </el-form>
    </el-row>
    <ad-table :data="driver.list" ux-grid ref="driverTable" keep-source :rules="rules"
              class="table"
              @row-click="selectDriverRow" :filterQuery="driverFilterQuery" @search="val_change"
              :edit-config="{trigger: 'manual', autoClear: false, mode: 'row'}">
      <ad-table-column label="序号" type="index" ctype="index"/>
      <ad-table-column label="公司名称" prop="companyName" edit-render width="240">
        <template v-slot:edit="{row}">
          <!--            <el-input size="mini" v-model="row.type" edit-render />-->
          <el-input size="mini" v-model="row.companyName" maxLength="20"/>
        </template>
      </ad-table-column>
      <ad-table-column label="结算人" prop="linkmanName" edit-render width="120">
        <template v-slot:edit="{row}">
          <el-input size="mini" v-model="row.linkmanName" maxLength="10"/>
        </template>
      </ad-table-column>
      <ad-table-column label="结算人电话" prop="linkmanPhone" edit-render width="120">
        <template v-slot:edit="{row}">
          <el-input size="mini" v-model="row.linkmanPhone" maxLength="13"/>
        </template>
      </ad-table-column>
      <ad-table-column label="操作" width="150">
        <template v-slot="{row}">
          <template v-if="driverTable.isActiveByRow(row)">
            <el-button size="mini" type="primary" plain @click="editDriver(row)">保存</el-button>
            <el-button size="mini" type="primary" plain @click="cancel(row)">取消</el-button>
          </template>
          <template v-else>
            <el-button size="mini" type="primary" plain @click="selectData(row)">选择</el-button>
          </template>
        </template>
      </ad-table-column>
    </ad-table>
    <!--      <ux-grid :data="driver.list" ref="tableTest" :edit-config="{trigger: 'click', mode: 'row'}">-->
    <!--        <ux-table-column title="司机姓名" field="name" edit-render>-->
    <!--          <template v-slot:edit="{row}">-->
    <!--            <el-input v-model="row.name"/>-->
    <!--          </template>-->
    <!--        </ux-table-column>-->
    <!--      </ux-grid>-->
    <!--    </div>-->
    <!--  </div>-->
  </div>
</template>

<script>
  import AdTable from '@/components/AdTable'
  import AdTableColumn from '@/components/AdTable/AdTableColumn'
  import AdStatusSelect from '@/components/AdStatusSelect'
  // import { getList as getDriverList, add as addDriver, edit as editDriver, del as delDriver }from '@/api/pick/wait'
  import api from '@/api/pick/wait'

  export default {
    components: {AdTable, AdTableColumn, AdStatusSelect},
    data() {
      return {
        companyName: null,
        settlementName: null,
        settlementPhone: null,
        isSave: false,
        driverTable: null,
        driverFilterQuery: {},
        driver: {
          initLoading: true,
          list: [],
          summary: {}
        },
        rules: {
          linkmanName: [{required: true, message: '请输入结算人'}],
          companyName: [{required: true, message: '请输入公司名称'}],
          linkmanPhone: [{required: true, message: '请输入结算人电话'}],
        }
      }
    },
    props: {
      type: null,
    },
    watch: {
      '$attrs.visible': {
        immediate: true,
        handler(visible) {
          console.log(visible)
          if (visible) {
            this.isSave = false;
            this.companyName = null;
            this.settlementName = null;
            this.settlementPhone = null;
            this.driver.list = [];
            if (this.type == 1) {
              api.getSuggest({businessType: 1}).then((res => {
                this.driver.list = res.data
              }))
            }
          }
        }
      }
    },
    created() {
    },
    mounted() {
      this.driverTable = this.$refs.driverTable.$children[0]
      // this.driverTable = this.$refs.tableTest
    },
    methods: {
      async addDriver() {
        if (this.isSave) {
          this.$notify({
            title: '新增',
            message: '请先保存',
            position: 'bottom-right',
            type: 'error'
          });
          return
        }
        const {row} = await this.driverTable.insertRow({type: '', name: ''}, -1)
        await this.driverTable.setActiveRow(row)
        this.isSave = true;
      },
      edit(row) {
        this.driverTable.setActiveRow(row)
        this.isSave = true;
      },
      cancel(row) {
        if (row.id) {
          this.driverTable.clearActived().then(() => {
            this.driverTable.revertData(row)
          })
        } else {
          this.driverTable.remove(row)
        }
        this.isSave = false;
      },
      editDriver(row) {
        let self = this;
        self.driverTable.validate(row).then(data => {
          if (data) return
          self.isSave = false;
          // if (row.id) {  // 修改
          //   if (this.driverTable.isUpdateByRow(row)) {
          //     api.updataExtraFee(row).then(res => {
          //       this.driverTable.clearActived()
          //     })
          //   }
          // } else {  // 新增
          let ajaxData = {...row};
          ajaxData.type = self.type;
          // ajaxData.orderId = this.$attrs.id
          api.addCompanyInfo(ajaxData).then(res => {
            // this.driverTable.clearActived()
            self.selectData(res.data)
            // this.val_change()
          })
          // }
        })
      },
      delDriver(row) {
        this.$confirm('确定删除吗？', '删除').then(() => {
          delDriver({id: row.id}).then(res => {
            this.driverTable.remove(row)
          })
        }).catch(err => {
        })
      },
      selectDriverRow(row) {
        // this.$emit('select', row)
      },
      selectData(row) {
        this.$emit('select', row)
      },
      val_change: function (falg) {
        let self = this;
        if (falg && self.settlementPhone.length < 4) {
          return;
        }
        if ((self.companyName == null || self.companyName == '') && (self.settlementName == null || self.settlementName == '') && (self.settlementPhone == null || self.settlementPhone == '')) {
          self.driver.list = [];
          return
        }
        let ajaxData = {
          businessType: self.type,
          companyName: self.companyName,
          linkmanName: self.settlementName,
          linkmanPhone: self.settlementPhone
        }
        api.getSuggest(ajaxData).then((res => {
          self.driver.list = res.data
        }))
      },
    }
  }
</script>

<style lang="scss" scoped>
  .table {
    height: 300px;
  }

  .table-op {
    margin: 0 0 12px 0;
    text-align: right;
  }

  ::v-deep .ad-table.ad-table__ux-grid {
    .elx-table-th {
      height: 38px !important;
      font-size: 12px;
    }

    .elx-table-td {
      padding-top: 5px;
      padding-bottom: 5px;
      font-size: 12px;
    }
  }
</style>